<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        #box {
            width: 594px;
            height: 197px;
            margin: 50px auto;
            border: 1px solid #e7e7e7;
            position: relative;
            overflow: hidden;
        }
        
        ul li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            display: inline-block;
            margin-left: 85px;
            position: relative;
            right: 30px;
        }        
        li {
            float: left;
        }       
        header {
            background-image: url(img/btn_cartoon.gif);
            height: 36px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }     
        header .c1 {
            position: absolute;
            top: 0;
            display: inline-block;
            background-position: 0 -100px;
            width: 85px;
            height: 36px;
        } 
        .icon {
            background-image: url(img/btn_cartoon.gif);
            background-size: 600px 525px;
        }  
        .c3 {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: snow;
            margin-left: 3px;
        } 
        .aa {
            background-color: #04aef4;
        }  
        .c4 {
            display: inline-block;
            background-position: 0 -400px;
            width: 60px;
            height: 36px;
            position: relative;
            top: -13px;
            right: 20px;
            position: relative;
        } 
        .c4 span {
            display: inline-block;
            width: 30px;
            height: 20px;
            top: 0;
        }       
        header em {
            float: right;
            color: #4f93d6;
            line-height: 36px;
            font-size: 14px;
            margin-right: 15px;
        } 
        .content {
            width: 593px;
            height: 145px;
        }
        .cc1 {
            margin-top: 46px;
            overflow: hidden;
            width: 593px;
            height: 145px;
        }       
        .cc2 {
            position: absolute;
            top: 46px;
            left: 100%;
        }
        .cc3 {
            position: absolute;
            top: 46px;
            left: 200%;
        } 
        .cc4 {
            position: absolute;
            top: 46px;
            left: 300%;
        }
        .cc2,.cc3,.cc4{
            top: -0px;
        }
        .active {
            display: block;
        }
        .content div {
            float: left;
            margin: 10px;
        }
        .content div span {
            display: block;
            font-size: 14px;
            color: #666;
        }  
        .content div span:first-of-type {
            color: #4f93d6;
        }     
        .content div span:first-of-type:hover {
            color: red;
            text-decoration: underline;
            cursor: pointer;
        }
        .rong{
            position: relative;
        }
    </style>
</head>
<body>
    <main id="box">
        <header>
            <span class="icon c1"></span>
            <ul>
                <li class="c3 aa"></li>
                <li class="c3"></li>
                <li class="c3"></li>
                <li class="c3"></li>
            </ul>
            <span class="icon c4">
                <span class="one"></span><span class="two"></span>
            </span>
            <em>更多>></em>
        </header>
        <div style="clear: both"></div>
        <div class="rong">
            <div class="content active cc1">
                <div>
                    <img src="img/01.jpg" alt="">
                    <span>海贼王</span>
                    <span>播放<em>28,456</em></span>
                </div>
                <div>
                    <img src="img/01.jpg" alt="">
                    <span>海贼王</span>
                    <span>播放<em>28,456</em></span>
                </div>
                <div>
                    <img src="img/01.jpg" alt="">
                    <span>海贼王</span>
                    <span>播放<em>28,456</em></span>
                </div>
                <div>
                    <img src="img/01.jpg" alt="">
                    <span>海贼王</span>
                    <span>播放<em>28,456</em></span>
                </div>
            </div>
            <div class="content cc2">
                <div>
                    <img src="img/02.jpg" alt="">
                    <span>哆啦A梦</span>
                    <span>播放<em>33,326</em></span>
                </div>
                <div>
                    <img src="img/02.jpg" alt="">
                    <span>哆啦A梦</span>
                    <span>播放<em>33,326</em></span>
                </div>
                <div>
                    <img src="img/02.jpg" alt="">
                    <span>哆啦A梦</span>
                    <span>播放<em>33,326</em></span>
                </div>
                <div>
                    <img src="img/02.jpg" alt="">
                    <span>哆啦A梦</span>
                    <span>播放<em>33,326</em></span>
                </div>
            </div>
            <div class="content cc3">
                <div>
                    <img src="img/03.jpg" alt="">
                    <span>火影忍者</span>
                    <span>播放<em>28,276</em></span>
                </div>
                <div>
                    <img src="img/03.jpg" alt="">
                    <span>火影忍者</span>
                    <span>播放<em>28,276</em></span>
                </div>
                <div>
                    <img src="img/03.jpg" alt="">
                    <span>火影忍者</span>
                    <span>播放<em>28,276</em></span>
                </div>
                <div>
                    <img src="img/03.jpg" alt="">
                    <span>火影忍者</span>
                    <span>播放<em>28,276</em></span>
                </div>
            </div>
            <div class="content cc4">
                <div>
                    <img src="img/04.jpg" alt="">
                    <span>龙珠</span>
                    <span>播放<em>57,865</em></span>
                </div>
                <div>
                    <img src="img/04.jpg" alt="">
                    <span>龙珠</span>
                    <span>播放<em>57,865</em></span>
                </div>
                <div>
                    <img src="img/04.jpg" alt="">
                    <span>龙珠</span>
                    <span>播放<em>57,865</em></span>
                </div>
                <div>
                    <img src="img/04.jpg" alt="">
                    <span>龙珠</span>
                    <span>播放<em>57,865</em></span>
                </div>
            </div>
        </div>
    </main>
</body>

</html>
<script>
    $(function () {
        var curr = 0;
        $('.c4 .two').click(function () {
            if (curr == 3) {
                curr = 0;
            }else{
                curr++;
            }
            $('.rong').stop().animate({ left: -593*curr },1000);
            $('header li').each(function(){
                $('.c3').eq(curr).addClass('aa').siblings().removeClass('aa');
            })
        })

        $('.c4 .one').click(function () {
            if (curr == 0) {
                curr = 3;
            }else{
                curr--
            }
            $('.rong').stop().animate({ left: -593*curr },1000);
            $('header li').each(function(){
                $('.c3').eq(curr).addClass('aa').siblings().removeClass('aa');
            })
        })
    })
</script>